<template>
    <div>
        <cmp :key='menuKey' :html='operateText()' :name="name"
             :contentText='textContent' :isClosedTag="isClosed"></cmp>
        <el-dialog title="诊断依据选择" :visible.sync="dialogVisible" width="30%">
            <el-select v-model="label" placeholder="诊断依据" style="width:100%">
                <el-option v-for="item in labels" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <div slot="footer">
                <el-button @click="setDialogFalse">取 消</el-button>
                <el-button type="primary" @click="setDialogTrue">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Vue from 'vue';

export default {
    name: 'marklabel',
    components: {
        cmp: {
            props: {
                html: String,
                contentText: Object,
                isClosedTag: Boolean,
            },
            render(h) {
                const _this = this;
                const com = Vue.extend({
                    template: _this.html,
                    data() {
                        return {
                            dataL: _this.contentText,
                            dialogVisible: false
                        };
                    },
                    methods: {
                        deleteLabel: (index) => {
                            this.$parent.deleteLabelF(index);
                        },
                        mouseupM: (event) => {
                            const start = window.getSelection().anchorOffset;
                            const end = window.getSelection().focusOffset;
                            if (start === end) {
                                return;
                            }

                            const _this = this;
                            let list = [];
                            _this.contentText.labels.forEach((item, index) => {
                                if (index === 0) {
                                    const contentStart = _this.contentText.text.substring(0, item.start < 0 ? 0 : item.start);
                                    list.push({
                                        entity: contentStart,
                                        isLabel: false
                                    });
                                    list.push({
                                        entity: item.entity,
                                        isLabel: true,
                                        start: item.start,
                                        end: item.end
                                    });
                                    if (_this.contentText.labels.length === 1) {
                                        const contentEnd = _this.contentText.text.substring(item.end, _this.contentText.text.length);
                                        list.push({
                                            entity: contentEnd,
                                            isLabel: false
                                        });
                                    }
                                } else if (_this.contentText.labels.length - 1 !== index && index !== 0) {
                                    const contentStart = _this.contentText.text.substring(_this.contentText.labels[index - 1].end, item.start);
                                    list.push({
                                        entity: contentStart,
                                        isLabel: false
                                    });
                                    list.push({
                                        entity: item.entity,
                                        isLabel: true,
                                        start: item.start,
                                        end: item.end
                                    });
                                } else if (_this.contentText.labels.length - 1 === index) {
                                    const contentStart = _this.contentText.text.substring(_this.contentText.labels[index - 1].end, item.start);
                                    list.push({
                                        entity: contentStart,
                                        isLabel: false
                                    });
                                    list.push({
                                        entity: item.entity,
                                        isLabel: true,
                                        start: item.start,
                                        end: item.end
                                    });
                                    const contentEnd = _this.contentText.text.substring(item.end, _this.contentText.text.length);
                                    list.push({
                                        entity: contentEnd,
                                        isLabel: false
                                    });
                                }
                            });
                            if (_this.contentText.labels.length === 0) {
                                list.push({
                                    entity: this.contentText.text,
                                    isLabel: false
                                });
                            }

                            const nodeText = window.getSelection().focusNode.data;
                            let textIndex = -1;

                            list.forEach((item, index) => {
                                if (item.entity === nodeText && !item.isLabel) {
                                    textIndex = index;
                                }
                            });
                            if (textIndex === -1) {
                                return;
                            }
                            const labelText = window.getSelection()
                                .toString();
                            if (nodeText.indexOf(labelText) === -1) {
                                return;
                            }
                            if (_this.isClosedTag) {
                                if (labelText.length > 40) {
                                    this.$message({
                                        type: 'warning',
                                        message: '一次标记不能大于40个词语'
                                    });
                                    return;
                                }
                            }
                            let labelIndex = 0; // 新增标签所在labels中第几个位置
                            let textLen = 0; // 新增label坐标
                            list.forEach((item, index) => {
                                if (index < textIndex && item.isLabel) {
                                    ++labelIndex;
                                }
                                if (index < textIndex) {
                                    textLen += item.entity.length;
                                }
                            });
                            const labelStart = start + textLen;
                            const labelEnd = end + textLen;
                            if (_this.isClosedTag) {
                                this.$parent.setDialogVisible(labelIndex, {
                                    entity: labelText,
                                    color: '',
                                    start: labelStart,
                                    end: labelEnd
                                });
                            }
                        },
                    },
                });
                return h(com, {});
            }
        }
    },
    props: {
        name: {
            type: String,
            default: ''
        },
        dataContent: {
            type: Object,
            default: {
                text: '',
                labels: []
            }
        },
        deleteLabelFatherMethod: {
            type: Function,
            default: null
        },
        addLabelFatherMethod: {
            type: Function,
            default: null
        },
        isClosed: {
            type: Boolean,
            default: false
        },
        isShowTag: {
            type: Boolean,
            default: true
        },
        labels: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            menuKey: 1,
            textArrayLen: 0,
            textContent: {},
            dialogVisible: false,
            label: '',
            index: 0,//标注的文本在整个标注文本列表中的次序
            labelContent: {}//标注的文本及文字
        };
    },
    methods: {
        operateText() {
            if (!this.textContent || !this.textContent.text) {
                return '';
            }
            let list = [];
            const _this = this;
            const isClosedTag = _this.isClosed;
            const isShowTag = _this.isShowTag;
            if (this.textContent.labels.length === 0) {
                list.push(`<span>${this.textContent.text}</span>`);
            } else {
                this.textContent.labels.forEach((item, index) => {
                    if (index === 0) {
                        let contentStart = _this.textContent.text.substring(0, item.start < 0 ? 0 : item.start);
                        list.push(`<span>${contentStart}</span>`);
                        let textLabel = `<span style='position: relative'> <el-tag size="small" effect='dark' @close.stop='deleteLabel(${index})' :closable='${isClosedTag}' type='${item.color}'>${item.entity}</el-tag>
                                                <el-tag v-show="${isShowTag}" size="mini" type='${item.color}' style=' position: absolute; top: -28px; left: 8px'>${item.label}</el-tag>
                                        </span>`;
                        list.push(textLabel);
                        if (_this.textContent.labels.length === 1) {
                            const contentEnd = _this.textContent.text.substring(item.end, _this.textContent.text.length);
                            list.push(`<span>${contentEnd}</span>`);
                        }
                    } else if (_this.textContent.labels.length - 1 !== index) {
                        let contentStart = _this.textContent.text.substring(_this.textContent.labels[index - 1].end, item.start);
                        list.push(`<span>${contentStart}</span>`);
                        let textLabel = `<span style='position: relative'> <el-tag size="small" @close.stop='deleteLabel(${index})' effect='dark' :closable='${isClosedTag}' type='${item.color}'>${item.entity}</el-tag>
                                                <el-tag v-show="${isShowTag}" size="mini" type='${item.color}' style=' position: absolute; top: -28px; left: 8px'>${item.label}</el-tag>
                                        </span>`;
                        list.push(textLabel);
                    } else if (_this.textContent.labels.length > 1) {
                        let contentStart = _this.textContent.text.substring(_this.textContent.labels[index - 1].end, item.start);
                        list.push(`<span>${contentStart}</span>`);
                        let textLabel = `<span style='position: relative'> <el-tag size="small" @close.stop='deleteLabel(${index})' effect='dark' :closable='${isClosedTag}' type='${item.color}' >${item.entity}</el-tag>
                                                <el-tag v-show="${isShowTag}" size="mini" type='${item.color}' style=' position: absolute; top: -28px; left: 8px'>${item.label}</el-tag>
                                        </span>`;
                        list.push(textLabel);
                        let contentEnd = _this.textContent.text.substring(item.end, _this.textContent.text.length);
                        list.push(`<span>${contentEnd}</span>`);
                    }
                });
            }
            return `<div>
                        <div @mouseup='mouseupM'  style='line-height: 56px; margin: 20px 8px 0 8px'>${list.join('')}</div>
                    </div>`;
        },
        modifyLabel(index, label) {
            this.textContent.labels.splice(index, 0, label);
            if (this.addLabelFatherMethod) {
                this.addLabelFatherMethod(label);
            }
        },
        deleteLabelF(index) {
            const delLabel = this.textContent.labels[index];
            this.textContent.labels.splice(index, 1);
            if (this.deleteLabelFatherMethod) {
                this.deleteLabelFatherMethod(this.name, this.textContent.text, this.textContent.labels, delLabel);
            }
        },
        //子组件调用
        setDialogVisible(index, label) {
            this.dialogVisible = true;
            this.index = index;
            this.labelContent = label;
        },
        setDialogTrue() {
            if (!this.label) {
                this.$message.warning({ message: '请选择诊断依据' });
                return;
            }
            this.dialogVisible = false;
            this.labelContent.label = this.label;
            this.labelContent.color = this.labelContent.label.search('阳性') !== -1 ? 'warning' : '';
            this.label = '';
            this.textContent.labels.splice(this.index, 0, this.labelContent);
            if (this.addLabelFatherMethod) {
                this.addLabelFatherMethod(this.name, this.textContent.text, this.textContent.labels, this.textContent);
            }
            this.labelContent = {};
        },
        setDialogFalse() {
            this.label = '';
            this.dialogVisible = false;
            this.index = 0;
            this.labelContent = {};
        }
    },
    watch: {
        'textContent.labels': {
            handler() {
                this.$nextTick(() => {
                    ++this.menuKey;
                    this.$forceUpdate();
                });
            }
        },
        deep: true,
        immediate: true
    },
    mounted() {
        this.textContent = this.dataContent;
    }
};
</script>

<style scoped>
</style>
